<template>
    <view class="wallet">
        <image class="bg"
            src="https://www.banbanhuo.com/minio/banbanhuo/a6b5d1b129c0fdc2aa960c25d0a8c2ed5f4c05e2732bfb120ba9be6d6a445842.png" />
        <!-- 余额 -->
        <view class="balance">
            <view class="wallet_icon">
                <image class="icon" src="@/static/images/mine/wallet.png" />
            </view>
            <view class="flex_b">
                <view style="width: 50%;">
                    <view class="balance_title">待结算</view>
                    <view class="balance_money">{{ balance.toFixed(2) }}</view>
                    <view class="balance_btn flex_c" @click="settlement">全部结算</view>
                </view>
                <view style="width: 50%;">
                    <view class="balance_title">待提现</view>
                    <view class="balance_money">{{ completeBalance.toFixed(2) }}</view>
                    <view class="balance_btn flex_c" @click="Withdrawal">全部提现</view>
                </view>
            </view>
            <view class="tips">
                <text style="color: red;">*</text> 余额结算会在1个工作日内完成。
                <br>
                <text style="color: red;">*</text> 提现会在1个工作日内完成。
            </view>
        </view>
        <!-- 提现记录 -->
        <view class="item_title flex_l">提现记录</view>
        <scroll-view scroll-y class="list" v-if="list.length > 0" @scrolltolower="scrolltolower">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="row1 flex_b">
                    <view class="row1_l">
                        <text>{{ item.description }}</text>
                        <text class="ml12 color_red" v-if="item.status == 1">(申请结算中)</text>
                        <text class="ml12 color_orange" v-if="item.status == 2">(等待提现)</text>
                        <text class="ml12 color_green" v-if="item.status == 3">(已完成)</text>
                    </view>
                    <view class="row1_r">{{ item.amount }}元</view>
                </view>
                <view class="row2 flex_b">
                    <view>{{ getTime(item.createTime) }}</view>
                    <view>余额：{{ balance.toFixed(2) }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="empty" v-else>
            <up-empty text="暂无提现记录" mode="list">
            </up-empty>
        </view>
    </view>
    <!-- 结算提示 -->
    <up-modal showCancelButton :show="showSettlementModal" title="结算提示" @confirm="settlementConfirm"
        @cancel="showSettlementModal = false">
        <view>
            <view>本次结算金额为<text style="color: red;">{{ balance.toFixed(2) }}</text>元；</view>
            <view>结算会在1个工作日内完成。</view>
        </view>
    </up-modal>
    <!-- 提现提示 -->
    <up-modal showCancelButton :show="showModal" title="提现提示" @confirm="confirm" @cancel="showModal = false">
        <view>
            <view>您的可提现的金额为<text style="color: red;">{{ completeBalance.toFixed(2) }}</text>元；</view>
            <view>提现完成后,1个工作日内到达您预留的银行账户,请注意查收。</view>
        </view>
    </up-modal>
    <!-- 实名提示 -->
    <up-modal :showCancelButton="false" :show="showAuthModal" title="实名认证提示" @confirm="toAuth">
        <view>您还未提供个人身份证及银行卡信息进行实名认证,必须完成认证后才能提现</view>
    </up-modal>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getTime } from '@/utils';
import { getWallet, getWalletPage, brokeragewithdrawApply, brokerageWithdraw } from '@/api/mine/wallet';
import { useMemberStore } from '@/stores/modules/member';
import { storeToRefs } from 'pinia';
const useMember = useMemberStore()
const { isAuth } = storeToRefs(useMember)
onLoad(() => {
    getWalletInfo()
    getWalletPageData()
})
const scrolltolower = (() => {
    if (list.value.length < total.value) {
        pageNo.value++
        getWalletPageData()
    } else {
        uni.showToast({
            title: "没有更多了",
            icon: "none"
        })
    }
})
// 查询余额
const balance = ref<number>(0)
const completeBalance = ref<number>(0)
const getWalletInfo = async () => {
    const res: any = await getWallet()
    balance.value = res.data.balance ?? 0
    completeBalance.value = res.data.completeBalance ?? 0
}
// 查询提现记录
const list = ref<any>([])
const total = ref(0)
const pageNo = ref(1)
const getWalletPageData = async () => {
    uni.showLoading({
        title: '加载中'
    })
    const par = {
        pageNo: pageNo.value,
        pageSize: 10,
        payType: 3 // 交易类型1、支付 2、退款 3、提现
    }
    const res: any = await getWalletPage(par)
    if (res.code == 0 && res.data) {
        list.value = list.value.concat(res.data.list)
        total.value = res.data.total
    }
    uni.hideLoading()
}
// 结算
const showAuthModal = ref(false)
const showSettlementModal = ref(false)
const settlement = (() => {
    if (!isAuth.value) {
        showAuthModal.value = true
        return
    }
    if (balance.value <= 0) {
        uni.showToast({
            title: '当前可结算金额为0',
            icon: 'none'
        })
    } else {
        showSettlementModal.value = true
    }
})
const settlementConfirm = async () => {
    showSettlementModal.value = false
    uni.showLoading({
        title: '正在处理中...'
    })
    const openId = useMemberStore().userInfo.openid
    try {
        const res: any = await brokeragewithdrawApply(openId)
        uni.hideLoading()
        if (res.code == 0 && res.data == 'ok') {
            uni.showToast({
                title: '结算申请已提交，预计24小时内结算成功',
                icon: 'none',
                duration: 2000
            })
            setTimeout(() => {
                pageNo.value = 1
                getWalletPageData()
                getWalletInfo()
            }, 500)
        } else {
            getWalletInfo()
            uni.showToast({
                title: res.data,
                icon: 'none',
                duration: 2000
            })
        }
    } catch (error) {
        uni.hideLoading()
        console.log(error)
    }
}
// 提现
const showModal = ref(false)
const Withdrawal = () => {
    if (!isAuth.value) {
        showAuthModal.value = true
        return
    }
    if (completeBalance.value <= 0) {
        uni.showToast({
            title: '您的余额不足，无法提现',
            icon: 'none'
        })
    } else {
        showModal.value = true
    }
}
const confirm = async () => {
    showModal.value = false
    uni.showLoading({
        title: '正在处理中...'
    })
    const openId = useMemberStore().userInfo.openid
    try {
        const res: any = await brokerageWithdraw(openId)
        uni.hideLoading()
        if (res.code == 0 && res.data == 'ok') {
            uni.showToast({
                title: '提现申请已提交，预计24小时内到账',
                icon: 'none',
                duration: 2000
            })
            setTimeout(() => {
                uni.navigateBack()
            }, 2000)
        } else {
            getWalletInfo()
            uni.showToast({
                title: res.data,
                icon: 'none',
                duration: 2000
            })
        }
    } catch (error) {
        uni.hideLoading()
        console.log(error)
    }
}
const toAuth = () => {
    showAuthModal.value = false
    uni.navigateTo({
        url: '/pages/mine/authInfo/authInfo'
    })
}
</script>

<style lang="scss" scoped>
.wallet {
    min-height: 100vh;
    overflow: hidden;
    background: #f8f8f8;
}

.bg {
    width: 750rpx;
    height: 384rpx;
    position: relative;
}

.balance {
    position: relative;
    width: 698rpx;
    height: 474rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0 auto;
    margin-top: -350rpx;
    z-index: 100;
    overflow: hidden;

    .wallet_icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin: 0 auto;
        margin-top: 24rpx;

        .icon {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
        }
    }

    .balance_title {
        width: 100%;
        font-size: 32rpx;
        color: #888888;
        text-align: center;
        margin-top: 24rpx;
    }

    .balance_money {
        width: 100%;
        text-align: center;
        font-family: 'DIN';
        font-weight: bold;
        font-size: 64rpx;
        color: #222222;
        margin-top: 16rpx;
    }

    .tips {
        font-size: 24rpx;
        margin-top: 20px;
        padding-left: 32rpx;
        color: #888888;
    }

    .balance_btn {
        width: 250rpx;
        height: 80rpx;
        background: #FE6E04;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        margin: 0 auto;
        margin-top: 12rpx;
    }
}


.item_title {
    width: 698rpx;
    height: 94rpx;
    background-color: #fff;
    font-weight: 700;
    font-size: 30rpx;
    color: #222222;
    margin: 0 auto;
    margin-top: 24rpx;
    border-radius: 16rpx 16rpx 0 0;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.list {
    width: 698rpx;
    height: calc(100vh - 526rpx);
    padding: 0 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 0 16rpx 16rpx;
    margin: 0 auto;

    .item {
        height: 146rpx;
        border-bottom: 2rpx solid #F8F8F8;

        .row1 {
            margin-top: 24rpx;

            &_l {
                font-size: 28rpx;
                color: #222222;
            }

            &_r {
                font-size: 32rpx;
                color: #FE6E04;
            }
        }

        .row2 {
            font-size: 26rpx;
            color: #888888;
            margin-top: 20rpx;
        }

        &:last-child {
            border-bottom: none;
        }
    }
}

.empty {
    width: 698rpx;
    height: calc(100vh - 550rpx);
    padding-top: 0 120rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 0 16rpx 16rpx;
    margin: 0 auto;
    border-top: 1rpx solid #f8f8f8;
}

.ml12 {
    margin-left: 12rpx;
}

.color_red {
    color: red !important;
}

.color_orange {
    color: #FE6E04 !important;
}

.color_green {
    color: #00B42A !important;
}
</style>